<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>边框样式</title>
</head>
<body>
<!-- 示例 1 : 边框风格-->
<!--属性： border-style
solid: 实线
dotted:点状
dashed:虚线
double:双线-->
<style>
    div#d1 {
        border-style: solid
    }
    div#d2 {
        border-style: dotted
    }
    div#d3 {
        border-style: dashed
    }
    div#d4 {
        border-style: double
    }
</style>

<div>默认无边框的div</div>
<div id="d1">实线边框</div>
<br/>
<div id="d2">点状边框</div>
<br/>
<div id="d3">虚线边框</div>
<br/>
<div id="d4">双线边框</div>

<!--边框颜色-->
<!--属性：border-color
值：red,#ff0000,rgb(255,0,0)-->

<!--边框宽度-->
<!--属性：border-width
值：数字-->

<!--都放在一起-->
<!--属性：border
值：颜色 风格 宽度-->
<style>
    div#d5{border: LightSkyBlue dotted 1px}
</style>

<div>默认无边框div</div>
<div id="d5">点状天蓝色细边框</div>

<!--只有一个方向有边框-->
<!--通过制定位置，可以只给一个方向设置边框风格，颜色和宽度
top,bottom,left,right 分别对应上下左右-->
<style>
    div#d6{
        width: 150px;
        height: 150px;
        background-color: lightgray;
        border-top-color: red;
        border-top-width: 50px;
        border-top-style: solid;
    }
</style>

<div id="d6">只有上面有边框</div>

<!--有交界的边都有边框-->
<style>
    div#d7{
        width: 150px;
        height: 150px;
        background-color: lightgray;
        border-top-style: solid;
        border-top-width: 50px;
        border-top-color: red;
        border-left-style: solid;
        border-left-width: 50px;
        border-left-color: blue;
    }
    div#d8{
        width: 150px;
        height: 150px;
        background-color: lightgray;
        border-top-style: solid;
        border-top-width: 50px;
        border-top-color: red;
        border-bottom-style: solid;
        border-bottom-width: 50px;
        border-bottom-color: green;
        border-left-style: solid;
        border-left-width: 50px;
        border-left-color: blue;
        border-right-style: solid;
        border-right-width: 50px;
        border-right-color: yellow;
    }
</style>

<div id="d7">左边和上边都有边框</div>
<br>
<div id="d8">四边都有边框　</div>
<br>

<!--块级元素和内联元素的边框区别-->
<p>可以看到，块级元素div默认是占用100%的宽度 <br>
    常见的块级元素有div h1 p 等<br>
    而内联元素span的宽度由其内容的宽度决定<br>
    常见的内联元素有 a b strong i input 等</p>
<style>
    .red{
        border:1px solid red;
    }
</style>

<div> 默认无边框div </div>
<div class="red"> 实线红色细边框  </div><br/>
<span class="red"> 实线红色细边框 </span><br/>

<!--练习-表格斑马线-->
<style>  
    table#t1{
        text-align: center;
        width: 50%;
        border-collapse: collapse;
    }
    tr{
    border-bottom-color: lightgray;
    border-bottom-style: solid;
    border-bottom-width: 1px;
    }
    .gray{background-color: #dddddd
    }
    td{
        width: 200px
    }
</style>

<table id="t1">
    <tr>
        <td>id</td><td>名称</td><td>血量</td><td>伤害</td>
    </tr>
    <tr class="gray">
        <td>1</td><td>gareen</td><td>340</td><td>58</td>
    </tr>
    <tr>
        <td>2</td><td>teemo</td><td>320</td><td>76</td>
    </tr>
    <tr class="gray">
        <td>3</td><td>deadbrother</td><td>400</td><td>90</td>
    </tr>
    <tr>
        <td>4</td><td>annie</td><td>380</td><td>38</td>
    </tr>
</table>

<!--练习-美人尖-->
<style>
    div#d9{
        width: 0;
        height: 50px;
        border-top-color: red;
        border-top-width: 50px;
        border-top-style: solid;
        border-left-color: transparent;
        border-left-width: 50px;
        border-left-style: solid;
        border-right-color: transparent;
        border-right-width: 50px;
        border-right-style: solid;
    }
</style>

<div id="d9"></div>

<!--练习-断线下划线-->
<style>
    table#t2{
        width: 50%;
        text-align: center;
    }
    td{
        border-bottom:deepskyblue 2px solid;
    }
</style>

<table id="t2">
    <tr>
        <td>商品</td><td>数量</td><td>价格</td><td>小记</td>
    </tr>
</table>
</body>
</html>